<template>
  <div id="nav">
    <ul>
      <li v-for="item in datalist" :key="item.id" @click="handelClick(item.id)">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      datalist: [
        { id: 1001, title: "花木兰" },
        { id: 1002, title: "姜子牙" },
        { id: 1003, title: "夺冠" },
      ],
    };
  },
  methods: {
    handelClick(id) {
      console.log(id);
      // location.href='/news'
      //  this.$router在路由处配置后导出的,拿到的是路由对象
      //编程式导航
      //1-路由
      // this.$router.push(`/detail/${id}`); //${id}在router/index里设置动态路由 path: '/detail/:id',
      //2-路由名字
      // this.$router.push({
      //   name: "myDetail",
      //   params: {
      //     myid: id,
      //   },
      // });
      // 3-query方式跳转详情/detail/id=123
      this.$router.push({ path: "/detail", query: { myid: id } });
    },
  },
};
</script>
<style scoped>
#nav ul {
  display: flex;
  width: 100%;
}
li {
  flex: 1;
  text-align: center;
}
</style>
